<template>
  <div class="navMenu">
    <el-row class="tac">
      <div class="zhanwei">

      </div>
  
    
    <el-menu
      :unique-opened=true
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu :index="String(Index)" v-for="(item,Index) in ListData" :key="Index">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ item.title }}</span>
        </template>
        
          <el-menu-item v-for="(value ,index) in item.children" :key="index" :index="computedIndex(Index,index).toString()" @click="todo(Index,index)">
            <el-link :href="value.location" style="color: white;" >{{ value.title }}</el-link>
          </el-menu-item>
          

      </el-submenu>
      
    </el-menu>
  
</el-row>
  </div>
</template>

<script>


export default {
    props:{
      'ListData' : Array,
      'username' : String
      },

    components: {
        
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      todo(Index,index){
        console.log(Index,index);
      },
      
    },
    computed:{
      computedIndex(){
        return (Index,index)=>{return Index + '-' + index}
      }
    },
    created(){
      
    }

}
</script>

<style>
.navMenu{
  max-width: 330px;
  width: 15%;
  height: 100%;
  position: absolute;
  
  background-color: rgb(84, 92, 100);
  
}
.zhanwei{
    height: 66px;
    width: 100%;
    background-color: rgb(85, 182, 234);
}
.el-row{
  width: 100%;
  height: 100%;
  overflow: auto;
  
}
::-webkit-scrollbar-thumb {
    background: #f4efef; /* 滑块颜色 */
    border-radius: 1px; /* 滑块圆角 */
}
::-webkit-scrollbar {
    width: 2px;
    color: white;
}
</style>